<template>
  <!-- <Layout/> -->
  <div v-if="$route.path === '/login'">
    <router-view />
  </div>
  <div v-else class="common-layout">
    <el-container>
      <el-aside width="200px">
        <slot>
          <Layout></Layout>
        </slot>
      </el-aside>
      <el-container>
        <el-header>
          <div class="title">
            欢迎：<span>{{ user }} </span> 登录系统
          </div>
          <el-button type="danger" @click="signOut">退出</el-button>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Layout from "./layout.vue";
import store from "@/store";
import { useRouter } from "vue-router";

import { reactive, ref } from "vue";
export default {
  components: { Layout },
  setup() {
    const user = ref('')
    user.value = store.getters.Info.name
    const state = reactive({
      uaerInfo: {},
    });
    const router = useRouter();
    const name = ref("");
    const token = ref("");
    name.value = store.getters.Info.name;
    token.value = store.getters.token;
    console.log(token);
    const signOut = () => {
      router.push("/login");
      store.dispatch("removeToken");
    };
    return {
      state,
      name,
      token,
      signOut,
    };
  },
};
</script>

<style lang="less" scoped>
.el-header {
  // background: darkcyan;
  display: block;
  position: relative;
  height: 49px;
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  box-shadow: 0 0 12px rgb(0 0 0 / 10%);
  background: turquoise;
  .el-button {
    float: right;
  }
  .title {
    float: left;
    display: block;
    position: absolute;
    span {
      color: rgb(129, 3, 122);
    }
  }
}
.el-main {
  padding: 8px 10px 0px 10px;
}
</style>
